<template>
  <div class="reserve-view">
    <van-cell-group inset>
      <van-cell title="预约发布编号" :value="form.appointmentPublishCode" />

      <!-- <van-cell title="年级" :value="form.grade?.name" /> -->

      <van-cell title="可以预约时间" :value="reserveDate" />

      <van-cell title="预约截止时间" :value="form.deadline" />

      <van-cell title="最大预约人数" :value="`${form.maxNum}人`" />

      <van-cell
        title="已预约人数"
        :value="`${form.maxNum - form.remainder}人`"
      />

      <!-- <van-cell title="预约发布说明" :label="form.description" /> -->
    </van-cell-group>
    <slot> </slot>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineProps } from 'vue'
import { IForm } from '../types'
const props = defineProps<{ form: IForm }>()

const reserveDate = computed(() => {
  const { reserveDate, reserveStartTime, reserveEndTime } = props.form
  return `${reserveDate} ${reserveStartTime}~${reserveEndTime}`
})
</script>

<style lang="less" scoped>
.reserve-view {
  margin-bottom: 30px;
}
</style>
